<template>
  <div class="tp" v-loading="state.loading">
    <Header />

    <Content>
      <div class="cp">
        <div class="card">
          <BasicTable @register="registerTable" :resizeHeightOffset="44">
            <template #form-advanceBefore>
              <a-space gap="small">
                <a-button type="primary" @click="onAdd">新增客户</a-button>
              </a-space>
            </template>

            <template #memberType="{ record }">
              <a-flex vertical gap="small" align="center">
                <div :class="{memberType_one: record.memberType == 1, memberType_two: record.memberType == 2, memberType_three: record.memberType == 3}">
                  {{ getLabel(memberTypeList, record.memberType) }}
                </div>
              </a-flex>
            </template>

            <template #action="{ record }">
              <TableAction
                :divider="true"
                :actions="[
                  {
                    color: 'success',
                    label: '编辑',
                    onClick: () => onEdit(record),
                  },
                  {
                    color: 'success',
                    label: '详情',
                    onClick: () => onMore(record),
                  },
                ]"
              />
            </template>
          </BasicTable>
        </div>
      </div>
    </Content>

    <Edit @register="registerEdit" @complete="reload" />
  </div>
</template>

<script setup>
  import { defineOptions, reactive } from 'vue';

  import { BasicTable, TableAction, useTable } from '@/components/Table';

  import Header from '@/widget/header.vue';
  import Content from '@/widget/content.vue';
  import { PAGE, POST_API } from '@/api/http';
  import {
    arrivalTimeList,
    birthdayTypes,
    getLabel,
    memberSources,
    memberTypeList,
  } from '@/api/ds';
  import { useRouter } from 'vue-router';

  import Edit from './edit.vue';
  import { useDrawer } from '@/components/Drawer';

  defineOptions({ name: 'MemberList' });

  const [registerEdit, { openDrawer }] = useDrawer();

  const router = useRouter();
  const state = reactive({ loading: false });

  const [registerTable, { reload }] = useTable({
    api: PAGE('/membership/getMemberInfoList'),
    beforeFetch: (arg) => {
      const { field, birthday, order } = arg;
      const [birthdayType, birthdayTime] = birthday ?? [];
      const isDesc = order === 'descend';

      if (field === 'availableCard') {
        arg.orderByKey = isDesc ? 1 : 2;
      } else if (field === 'orderNum') {
        arg.orderByKey = isDesc ? 3 : 4;
      } else if (field === 'lastServiceDate') {
        arg.orderByKey = isDesc ? 5 : 6;
      }
      arg.orderByKey ??= 0;
      delete  arg.birthday;
      return Object.assign(arg, { birthdayType, birthdayTime });
    },
    formConfig: {
      baseColProps: { style: { paddingRight: '12px' } },
      actionColOptions: { span: 12 },
      schemas: [
        {
          field: 'nameOrMobileLike',
          component: 'Input',
          componentProps: {
            placeholder: ' 输入客户姓名/手机号搜索',
          },
          colProps: { span: 6 },
        },
        {
          field: 'memberSources',
          component: 'Select',
          componentProps: {
            placeholder: '进店渠道',
            showSearch: false,
            mode: 'multiple',
            options: memberSources,
            showArrow:true,
          },
          colProps: { span: 6 },
        },

        {
          field: 'memberTypes',
          component: 'Select',
          componentProps: {
            placeholder: '客户类型',
            mode: 'multiple',
            options: memberTypeList,
            showArrow:true,
          },
          colProps: { span: 6 },
        },

        {
          field: 'arrivalTime',
          component: 'Select',
          componentProps: {
            placeholder: '未到店时长',
            showSearch: false,
            options: arrivalTimeList,
            showArrow:true,
          },
          colProps: { span: 6 },
        },

        {
          field: 'labels',
          component: 'ApiSelect',
          componentProps: {
            placeholder: '标签',
            valueField: 'id',
            labelField: 'name',
            optionFilterProp:"label",
            mode: 'multiple',
            showArrow:true,
            api: POST_API('/membership/getStoreLabelList'),
          },

          colProps: { span: 6 },
        },

        {
          field: 'birthday',
          component: 'Cascader',
          componentProps: {
            placeholder: '近期生日顾客',
            showSearch: false,
            options: birthdayTypes,
          },
          colProps: { span: 6 },
        },
      ],
    },
    columns: [
      {
        title: '客户姓名',
        dataIndex: 'realName',
        ellipsis: false,
      },
      {
        title: '客户手机号',
        dataIndex: 'mobile',
        ellipsis: false,
      },

      {
        title: '客户类型',
        dataIndex: 'memberType',
        ellipsis: false,
        // customRender: ({ value }) => getLabel(memberTypeList, value),
        slots: { customRender: 'memberType' },
      },
      {
        title: '进店渠道',
        dataIndex: 'memberSource',
        ellipsis: false,
        customRender: ({ value }) => getLabel(memberSources, value),
        width: 110,
      },

      {
        title: '有效卡张数',
        dataIndex: 'availableCard',
        ellipsis: false,
        sorter: true,
        width: 110,
      },

      {
        title: '消费次数',
        dataIndex: 'orderNum',
        ellipsis: false,
        sorter: true,
        width: 110,
      },

      {
        title: '未到店时间',
        dataIndex: 'lastServiceDate',
        ellipsis: false,
        sorter: true,
        width: 120,
      },
    ],
    useSearchForm: true,
    showTableSetting: false,
    bordered: true,
    showIndexColumn: false,
    rowKey: 'memberCode',
    actionColumn: {
      title: '操作',
      align: 'center',
      width: 160,
      dataIndex: 'action',
      fixed: 'right',
      slots: { customRender: 'action' },
    },
  });

  function onAdd() {
    openDrawer(true, { behavior: 'add' });
  }

  function onEdit({ memberCode }) {
    openDrawer(true, { behavior: 'edit', memberCode });
  }

  function onMore({ memberCode }) {
    router.push(`/member/list/detail?memberCode=${memberCode}`);
  }
</script>
<style lang="less" scoped>
  .card {
    padding: 12px;
  }
  .memberType_one {
    color: #5bc7b6;
  }
  .memberType_two {
    color: #acb4bf;
  }

  .memberType_three {
    color: #f2a8ba;
  }
</style>
